<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<html>
<head>
    <title>分页插件查询数据</title>
</head>
<body>
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/js/jquery3.6.1.js"></script>

<script>
    //分页函数
    function to_page(page){//形参
        //把形参赋值给pageNum隐藏域
        $("#pageNum").val(page);
        //form表单提交
        $("#form1").submit();
    }

    //删除函数
    function deleteClick(id){
        if(confirm("确认删除吗?")){
            window.location.href="/delete.do?id="+id;
        }
    }

    //添加功能
    function addClick(){
        window.location.href="/toAdd.do";
    }

</script>

<%--搜索栏  模糊查询手机名称、是否热卖、品牌--%>
<form action="/productListPageHelper.do" method="post" id="form1">
    手机名称： <input type="text" name="name" value="${name}">
    是否热卖：
    <input type="radio" name="isHot" value="2" checked/>全部
    <input type="radio" name="isHot" value="1" <c:if test="${isHot==1}">checked</c:if>/>是

    <input type="radio" name="isHot" value="0" <c:if test="${isHot==0}">checked</c:if>/>否

    品牌：
    <select name="typeId">
        <option value="-1">全部</option>
        <c:forEach items="${types}" var="type">
            <option value="${type.tid}"
                    <c:if test="${type.tid==typeId}">selected</c:if>
            >${type.tname}</option>
        </c:forEach>
    </select>
    <input type="submit" value="搜索" class="btn btn-primary btn-sm">
    <%--隐藏域--%>
    <input type="hidden"  name="pageNum" id="pageNum">
</form>

<%--主体数据--%>
<table class="table table-bordered table-condensed table-striped">
    <div>
        <button onclick="addClick()">添加</button>
    </div>
    <tr>
        <th>名称</th>
        <th>价格</th>
        <th>出厂日期</th>
        <th>是否热卖</th>
        <th>商品描述</th>
        <th>品牌</th>
        <th>图片</th>
        <th>操作</th>
    </tr>
    <%--遍历集合数据--%>
    <c:forEach items="${pageInfo.list}" var="product">
        <tr>
            <td>${product.name}</td>
            <td>${product.price}</td>
            <td>
                <fmt:formatDate value="${product.date}" pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate>
            </td>
            <c:if test="${product.isHot==1}">
                <td>是</td>
            </c:if>
            <c:if test="${product.isHot==0}">
                <td>否</td>
            </c:if>

            <td>${product.description}</td>
            <td>
                ${product.types.tname}
            </td>
            <%--图片地址--%>
            <td>
                <img src="${product.url}" alt="" width="100px" height="100px">
            </td>
            <td>
                <a href="#" onclick="deleteClick(${product.id})">删除</a>
                <a href="/toUpdate.do?id=${product.id}">修改</a>
            </td>
        </tr>
    </c:forEach>
    <%--

        <tr>
            <td colspan="6" class="pagination pagination-lg" style="padding-left: 500px">
                <a href="javascript:to_page(1)">首页</a>
                <a href="javascript:to_page(${pageNum-1})">上一页</a>
                <span>第${pageNum}页/共${total}页</span>
                <a href="javascript:to_page(${pageNum+1})">下一页</a>
                <a href="javascript:to_page(${total})">尾页</a>
            </td>
        </tr>
    --%>
</table>
<%--分页--%>
<ul class="pagination pagination-sm" style="padding-left: 550px">
    <li> <a href="javascript:to_page(1)">首页</a></li>
    <li> <a href="javascript:to_page(${pageInfo.prePage})">上一页</a></li>
    <li> <span>第${pageInfo.pageNum}页/共${pageInfo.pages}页</span></li>
    <li>  <a href="javascript:to_page(${pageInfo.nextPage})">下一页</a></li>
    <li> <a href="javascript:to_page(${pageInfo.total})">尾页</a></li>
</ul>

</body>
</html>
